<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟HTML</title>
    <!--    <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:-->
    <!--    <base href="http://www.runoob.com/images/" target="_blank">-->
    <!--    <meta> 标签- 使用实例-->
    <!--    为搜索引擎定义关键词:-->

    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <!--    为网页定义描述内容:-->

    <meta name="description" content="免费 Web & 编程 教程">
    <!--    定义网页作者:-->

    <meta name="author" content="Runoob">
    <!--    每30秒钟刷新当前页面:-->

    <meta http-equiv="refresh" content="30">
    <style>
        h2 {
            font-style: italic
        }
    </style>
    <!--    <link rel="stylesheet" type="text/css" href="mystyle.css">-->
    <script>
        function myFunction()
        {
            document.getElementById("demo").innerHTML="Hello JavaScript!";
        }
    </script>
</head>
<body marginwidth="10px" marginheight="10px">
<h1 style="background-color: aqua;color: blue;margin-left: 20px">这是一个标题</h1>
<h2 style="flood-color: brown">这是一个标题</h2>
<h3>这是一个标题</h3>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<!--<a href="https://www.runoob.com">这是一个链接</a>-->
<img src="/images/logo.png" width="200" height="200" alt="缺失"/>
<!--<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">-->
<h2>有序列表</h2>
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>
<h2>密码输入框</h2>

<form action="">
    <label>
        Username:
        <input type="text" name="user">
    </label><br>
    <label>
        Password:
        <input type="password" name="password">
    </label>
</form>
<h2>单选框</h2>

<form action="">
    <label>
        <input type="radio" name="sex" value="male">
        男
    </label>
    <label>
        <input type="radio" name="sex" value="female">
        女
    </label>
</form>
<h2>多选框</h2>

<form>
    <label>
        <input type="checkbox" name="vehicle" value="Bike">
        我喜欢自行车
    </label>我喜欢自行车<br>
    <label>
        <input type="checkbox" name="vehicle" value="Car">
        我喜欢小汽车
    </label>
</form>

<h2>提交按钮(Submit)</h2>
<p>定义了提交按钮。
    当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
    action 属性会对接收到的用户输入数据进行相关的处理:</p>
<form name="input" action="http://localhost:8081/study/sys/getUserList" method="post">
    <label>
        Username:
        <input type="text" name="name">
    </label>
    <input type="submit" value="Submit">
</form>
<h2>表单</h2>

<div>
    <!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
    <form>
        <label>Name:
            <input name="submitted-name" autocomplete="name">
        </label>
        <button>Save</button>
    </form>

    <!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
    <form method="post">
        <label>Name:
            <input name="submitted-name" autocomplete="name">
        </label>
        <button>Save</button>
    </form>

    <!-- 表单使用 fieldset, legend, 和 label 标签 -->
    <form method="post">
        <fieldset>
            <legend>Title</legend>
            <label><input type="radio" name="radio"> Select me</label>
        </fieldset>
    </form>
</div>


<h1>我的第一个 JavaScript </h1>

<p id="demo">
    JavaScript 可以触发事件，就像按钮点击。</p>



<button type="button" onclick="myFunction()">点我</button>
<h2>测试</h2>
<form >
    <label >
        用户名字
        <input type="text" name="username">
    </label>
</form>
</body>
</html>